<template>
  <div>
    <el-button @click="$router.replace('/shopAdd')">添加商品</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="编号">
        <template slot-scope="scope">
          <span>{{ scope.row.Id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品名称">
        <template slot-scope="scope">
          <span>{{ scope.row.SpuName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="标签">
        <template slot-scope="scope">
          <div class="flex-row gap-c1">
            <el-tooltip content="小料可用" placement="top">
              <i class="el-icon-sugar" v-if="scope.row.IsEnableMaterial"></i>
            </el-tooltip>
            <el-tooltip content="热销" placement="top">
              <i class="el-icon-sell" v-if="scope.row.IsHotSale"></i>
            </el-tooltip>
            <el-tooltip content="规格可用" placement="top">
              <i class="el-icon-files" v-if="scope.row.IsEnableSpec"></i>
            </el-tooltip>
            <el-tag type="danger" size="mini">new</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleDetail(scope.row.Id)"
            >详细</el-button
          >

          <el-dropdown @command="handleCommand">
            <el-button type="primary" size="mini" style="margin-left: 12px">
              更多<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                :command="{ command: 'update', id: scope.row.Id }"
                >编辑</el-dropdown-item
              >
              <el-dropdown-item
                :command="{ command: 'skuList', id: scope.row.Id }"
                >查看sku</el-dropdown-item
              >
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="detailVisible">
      <spu-detail :Id="Id" v-if="detailVisible"></spu-detail>
    </el-dialog>
    <el-dialog title="基础信息修改" :visible.sync="updateVisible">
      <spu-update
        :Id="Id"
        @close="() => {updateVisible = false;getData()}"
        v-if="updateVisible"
      ></spu-update>
    </el-dialog>
    <el-dialog :visible.sync="skuListVisible">
      <sku-list
        :spuId="Id"
        @close="() => (skuListVisible = false)"
        v-if="skuListVisible"
      ></sku-list>
    </el-dialog>
  </div>
</template>

<script>
import SpuApi from "@/api/SpuApi";
import SpuDetail from "./components/SpuDetail.vue";
import SpuUpdate from "./components/SpuUpdate.vue";
import SkuList from "./components/Sku/SkuList.vue";

export default {
  data() {
    return {
      tableData: [],
      query: {
        spuName: "",
        pageSize: 10,
        pageIndex: 1,
      },
      total: 0,
      Id: 0,
      detailVisible: false,
      updateVisible: false,
      skuListVisible: false,
    };
  },
  methods: {
    getData() {
      SpuApi.getAll(this.query).then((res) => {
        this.tableData = res.data.data;
        this.total = res.data.total;
      });
    },
    handleDetail(id) {
      this.Id = id;
      this.detailVisible = true;
    },
    handleCommand(command) {
      this.Id = command.id;
      console.log(this.Id);
      switch (command.command) {
        case "update":
          this.updateVisible = true;
          break;
        case "skuList":
          this.skuListVisible = true;
          break;
        default:
          console.log("指令不存在");
          break;
      }
    },
  },
  components: {
    SpuDetail,
    SpuUpdate,
    SkuList,
  },
  created() {
    this.getData();
  },
};
</script>

<style scoped>
.flex-row > i {
  font-size: var(--text-size5);
}
</style>